<template>
	<view class="app">
		<view class="tui-set-box">
			<view class="tui-mtop">
				<tui-list-cell padding="0" :lineLeft="false" :arrow="false">
					<view class="flex-col flex-x-center flex-y-center" style="width: 100%;font-weight:500;">
						<image style="width:40px;" :src="successSrc" mode="widthFix" />
						<text>请出示给加油员确认</text>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="false" :arrow="false">
					<view class="flex flex-x-between flex-y-center" style="width: 100%;">
						<view class="tui-list-cell opacity-six">
							加油站点
						</view>
						<view class="tui-list-cell">{{easyOilOrder.stationName}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="false" :arrow="false">
					<view class="flex flex-x-between flex-y-center" style="width: 100%;">
						<view class="tui-list-cell opacity-six">
							订单编号
						</view>
						<view class="tui-list-cell">{{easyOilOrder.easyOilOrder.orderSign}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="false" :arrow="false">
					<view class="flex flex-x-between flex-y-center" style="width: 100%;">
						<view class="tui-list-cell opacity-six">
							油枪油号
						</view>
						<view class="tui-list-cell"> {{easyOilOrder.oilgunCode}}号枪 {{easyOilOrder.oilCode}}</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="false" :arrow="false">
					<view class="flex flex-x-between flex-y-center" style="width: 100%;">
						<view class="tui-list-cell opacity-six">
							输入金额
						</view>
						<view class="tui-list-cell">{{easyOilOrder.tradeAmount}}元</view>
					</view>
				</tui-list-cell>
				<!-- <tui-list-cell padding="0" :lineLeft="false" :arrow="false">
					<view class="flex flex-x-between flex-y-center" style="width: 100%;">
						<view class="tui-list-cell opacity-six">
							优惠合计
						</view>
						<view class="tui-list-cell price-color">{{easyOilOrder.easyOilOrder.discountAmount}}元</view>
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0" :lineLeft="false" :arrow="false">
					<view class="flex flex-x-between flex-y-center" style="width: 100%;font-weight:600;">
						<view class="tui-list-cell" style="font-size:22px;">
							实付
						</view>
						<view class="tui-list-cell price-color" style="font-size:22px;">{{easyOilOrder.easyOilOrder.payAmount}}元</view>
					</view>
				</tui-list-cell> -->
			</view>
		</view>
	</view>
</template>

<script>
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiButton from "@/components/extend/button/button"
	export default {
		components: {
			tuiListCell,
			tuiButton
		},
		data() {
			return {
				successSrc: '../static/icon/success.png',
				orderNo: '',
				easyOilOrder:{}
			}
		},
		onLoad(options) {
			this.orderNo = options.order_no || '';
			this.getEasyOilOrder();
		},
		methods: {
			getEasyOilOrder(){
				let that = this;
				this.$http.request({
					url: this.$api.easyOil.easyOilOrderDetail,
					showLoading: false,
					method: 'post',
					data: {
						orderNo: this.orderNo
					}
				}).then(res => {
					console.log({res});
					if(res.code == 0){
						this.easyOilOrder = res.data;
					}else{
						this.$http.toast(res.msg);
					}
					that.checkStatus();
					
				}).catch(e => {
					console.log(e);
				});
			},
			checkStatus(){
				this.$http
					.request({
						url: this.$api.easyOil.checkStatus,
						method: 'POST',
						data:{
							order_no:this.orderNo
						}
					})
					.then(res => {
						console.log({res});
				});	
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tui-set-box {
		padding-bottom: 20rpx;
		color: #333;
	}

	.tui-list-cell {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		font-size: 30rpx;
	}

	.tui-info-box {
		font-size: 34rpx;
	}

	.tui-avatar {
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;
		border-radius: 100rpx;
		border: 1rpx solid #000000;
	}

	.tui-mtop {
		margin-top: 20rpx;
	}

	.tui-exit {
		padding: 100rpx 24rpx;
	}
	.exit-btn{
		text-align: center;
		padding: 20rpx 0;
		color: #FFFFFF;
	}
	.price-color{
		color: #ff8663;
	}
	.opacity-six{
		opacity: 0.6;
	}
</style>
